<!DOCTYPE html>
<html lang="en">
<head>
    <title>修改支付密码</title>
    <meta charset="UTF-8">
    <meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <script src="https://og6593g2z.qnssl.com/fundebug.0.3.3.min.js" apikey="e65b1e28cd641345cd31ef6dce8ac62f7aaa3ba3420be5a1c4aa23ee3636992d"></script>
    <link href="{$Think.config.RESOURCEURL}wx_assets/css/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <link href="{$Think.config.RESOURCEURL}wx_assets/personCenter/css/index.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <link href="{$Think.config.RESOURCEURL}wx_assets/iconfont/iconfont.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.1.1.3.min.js{$Think.config.RESOURCE_VER}"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.alert.js{$Think.config.RESOURCE_VER}"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/wx_share.js{$Think.config.RESOURCE_VER}"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/product/cookie.js{$Think.config.RESOURCE_VER}"></script>
    <style media="screen">
      body{
        background-color:#F5F4F9;
        color:#333333;
      }
      p {
        text-align: center;
        margin-top: 100px;
        margin-bottom: 10px;
      }
      .keyboard-password {
        margin: 0 12px;
        display: flex;
        position: relative;
        background-color: #FFF;
      }
      .keyboard-password li {
        flex: 1;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 16.67%;
      }
      .keyboard-password li i {
        display: none;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #000;
        position: absolute;
        top: 50%;
      }
      .keyboard-password li:not(:last-child):after {
        content: '';
        width: 1px;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        background-color: #D9D9D9;
        transform: scaleX(0.5);
      }
    </style>
</head>
<body>
  <p class="tips">请输入旧支付密码，以验证身份</p>
  <ul class="keyboard-password">
    <li><i></i></li>
    <li><i></i></li>
    <li><i></i></li>
    <li><i></i></li>
    <li><i></i></li>
    <li><i></i></li>
  </ul>
  <input type="number" maxlength="2" class="password" style="position: absolute;left: 0;top: -200%;">
</body>
<script>
function Page() {
  this.isLoading = false;
};

$.extend(Page.prototype, {
    init: function () {
        this.bindEvents();
        $('.password')[0].focus();
    },

    // 绑定事件
    bindEvents: function() {
      $('.password').on('input', $.proxy(this.handlePasswordChange, this));
      $('.keyboard-password').click($.proxy(this.handlekeyboardPasswordClick, this));
    },

    // 当支付密码改变时执行
    handlePasswordChange: function() {
      var value = $('.password').val();
      var length = value.length;
      console.log(value);
      $('.keyboard-password li i').each(function(index, elem) {
        if (index < length) {
          $(elem).css('display', 'block');
        } else {
          $(elem).css('display', 'none');
        }
      })
      if (length >= 6) this.handleCheckOldPwd(value);
    },

    // 调用接口验证旧密码
    handleCheckOldPwd: function(oldPwd) {
      if (this.isLoading) return
      this.isLoading = true
      $.util.pageLoading.show();
      var params = {
        oldPassword: oldPwd
      }
      $.ajax({
          type: "post",
          url: '{$Think.config.SERVER_HOST}call.json?customerId={$customerId}',
          dataType: 'json',
          data: {
             module: 'purse',
             method: 'contrastPayPassword',
             params: JSON.stringify(params)
          },
          success: $.proxy(this.handleCheckOldPwdSucc, this),
          error: $.proxy(this.handleAjaxError, this)
      });
    },

    // 验证成功后执行
    handleCheckOldPwdSucc: function(res) {
      $.util.pageLoading.hide();
      if (+res.code === 0) {
        location.href = '{$Think.config.SERVER_HOST}call.html?customerId={$customerId}&module=purse&method=setPayPassword&token=' + res.token
      } else {
        $.util.alert(res.msg);
        $('.password').val('');
        $('.keyboard-password li i').css('display', 'none');
        $('.password')[0].focus();
        this.isLoading = false;
      }
    },

    // 当点击密码框时，input获取焦点
    handlekeyboardPasswordClick: function() {
      $('.password')[0].focus();
    },

    // ajax请求失败时执行
    handleAjaxError: function(err) {
      console.log(err)
    }
});

var page = new Page();
page.init();
</script>
</html>
